<template>
  <div class="shouye">
    <div class="top-box">
      <div class="top-item item1">
        <p class="top-title">数据中台数据总量</p>
        <p class="numb">{{ mainData.dataTotal }}<span class="unit">条</span></p>
        <div class="img-box item-img1"></div>
      </div>
      <div class="top-item item2">
        <p class="top-title">数据中台全量表</p>
        <p class="numb">
          {{ mainData.tableNum }}<span class="unit">张</span
          ><span class="youxiao"
            >有效表<span class="youxiao-numb">{{ mainData.tableInvalNum }}</span
            >张</span
          >
        </p>
        <div class="img-box item-img2"></div>
      </div>
      <div class="top-item item3">
        <p class="top-title">接入系统数量</p>
        <p class="numb">
          {{ mainData.accessTotal }}<span class="unit">个</span>
        </p>
        <div class="img-box item-img3"></div>
      </div>
      <div class="top-item item4">
        <p class="top-title">负面清单数</p>
        <p class="numb">
          {{ mainData.negativeTotal }}<span class="unit">条</span>
        </p>
        <div class="img-box item-img4"></div>
      </div>
    </div>
    <div class="middle-box">
      <div class="middle-item">
        <p class="title">数据中台数据条数变化</p>
        <div class="chart-box" ref="lineBox"></div>
      </div>
      <div class="middle-item">
        <p class="title">各系统数据资源情况</p>

        <div class="chart-box" ref="pieBox"></div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="bot-left bot-item">
        <p class="title">数据模型主题域</p>
        <div class="bot-content bot-content1">
          <div class="shu-xian"></div>
          <div
            class="bot-left-item"
            :class="'bot-left-item' + index"
            v-for="(item, index) in mainData.modelList"
            :key="index"
          >
            <div class="item1 item" :class="'bg' + index">
              <p>{{ item.modelType }}</p>
            </div>
            <div class="item2 item">
              <h5>表数量</h5>
              <p :class="'c' + index">{{ item.tableNum }}</p>
            </div>
            <div class="item3 item">
              <h5>字段数量</h5>
              <p :class="'c' + index">{{ item.fieldNum }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bot-center bot-item">
        <p class="title title1">
          数据仓库建设情况 &nbsp;
          <img class="title-img" src="../assets/images/img (5).png" alt="" />
        </p>
        <div class="bot-content">
          <div class="center1">
            <div class="bot-left">
              <p class="bot-title c1">贴源层</p>
              <div class="bot-numb">
                <div class="numb-item">
                  <h5>系统数量(套)</h5>
                  <p class="c1">{{ mainData.tyXtNum }}</p>
                </div>
                <div class="numb-item">
                  <h5>负面清单数(张)</h5>
                  <p class="c1">{{ mainData.tyFmNum }}</p>
                </div>
                <div class="numb-item">
                  <h5>有效表数量(张)</h5>
                  <p class="c1">{{ mainData.tyYxNum }}</p>
                </div>
              </div>
            </div>
            <div class="bot-right" ref="botLine1"></div>
          </div>
          <div class="center-bot"></div>
          <div class="center1">
            <div class="bot-left">
              <p class="bot-title c2">共享层</p>
              <div class="bot-numb">
                <div class="numb-item">
                  <h5>主题域(个)</h5>
                  <p class="c2">{{ mainData.gxZtNum }}</p>
                </div>
                <div class="numb-item">
                  <h5>负面清单数(张)</h5>
                  <p class="c2">{{ mainData.gxFmNum }}</p>
                </div>
                <div class="numb-item">
                  <h5>有效表数量(张)</h5>
                  <p class="c2">{{ mainData.gxYxNum }}</p>
                </div>
              </div>
            </div>
            <div class="bot-right" ref="botLine2"></div>
          </div>
          <div class="center-bot"></div>
          <div class="center1">
            <div class="bot-left">
              <p class="bot-title c3">分析层</p>
              <div class="bot-numb">
                <div class="numb-item">
                  <h5>分析场景(个)</h5>
                  <p class="c3">{{ mainData.fxNum }}</p>
                </div>
                <div class="numb-item">
                  <h5>宽表数量(张)</h5>
                  <p class="c3">{{ mainData.fxKbNum }}</p>
                </div>
              </div>
            </div>
            <div class="bot-right" ref="botLine3"></div>
          </div>
          <div class="center-bot"></div>
        </div>
      </div>
      <div class="bot-right bot-item">
        <p class="title">数据接入热度Top10</p>
        <div class="check-box">
          <el-radio-group v-model="radio" size="mini" @change="radioChange">
            <el-radio-button label="接入"></el-radio-button>
            <el-radio-button label="申请"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="bot-content top10-box">
          <ul class="top10-left">
            <li
              v-for="index in 10"
              :key="index"
              class="top-index"
              :class="'top-index' + index"
            >
              {{ index > 3 ? index : "" }}
            </li>
          </ul>
          <div class="top10-right" ref="top10"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSynum, getSyApplynum } from "../serve/api";

export default {
  name: "shouye",

  components: {},

  data() {
    return {
      mainData: {
        modelList: [
          {
            modelType: "人员域",
            tableNum: 3,
            fieldNum: 100,
          },
          {
            modelType: "物资域",
            tableNum: 30,
            fieldNum: 102,
          },
          {
            modelType: "财务域",
            tableNum: 12,
            fieldNum: 101,
          },
          {
            modelType: "人员域",
            tableNum: 3,
            fieldNum: 100,
          },
          {
            modelType: "物资域",
            tableNum: 30,
            fieldNum: 102,
          },
          {
            modelType: "财务域",
            tableNum: 12,
            fieldNum: 101,
          },
          {
            modelType: "人员域",
            tableNum: 3,
            fieldNum: 100,
          },
          {
            modelType: "物资域",
            tableNum: 30,
            fieldNum: 102,
          },
          {
            modelType: "财务域",
            tableNum: 12,
            fieldNum: 101,
          },
          {
            modelType: "财务域",
            tableNum: 12,
            fieldNum: 101,
          },
        ],
        // dataTotal: 123,
        // tableNum: 223,
        // accessTotal: 22,
        // negativeTotal: 444,
        // tyXtNum: 11,
        // tyFmNum: 23,
        // tyYxNum: 23,
        // gxZtNum: 5,
        // gxFmNum: 7,
        // gxYxNum: 8,
        // fxNum: 9,
        // fxKbNum: 10,
        // midList: [
        //   { statDate: "06-24", dataNum: 12 },
        //   { statDate: "06-23" },
        //   { statDate: "06-22" },
        //   { statDate: "06-21" },
        //   { statDate: "06-20" },
        //   { statDate: "06-19" },
        //   { statDate: "06-18" },
        // ],
        // zyList: [
        //   { zyType: "其他", zyNum: 15 },
        //   { zyType: "用电信息采集系统", zyNum: 12 },
        //   { zyType: "电缆精益化系统", zyNum: 14 },
        // ],
        // modelList: [
        //   { modelType: "人员域", tableNum: 3, fieldNum: 100 },
        //   { modelType: "物资域", tableNum: 30, fieldNum: 102 },
        //   { modelType: "财务域", tableNum: 12, fieldNum: 101 },
        // ],
        // ckList: [
        //   {
        //     statDate: "2024-01",
        //     tyFmNum: 23,
        //     tyYxNum: 23,
        //     gxFmNum: 7,
        //     gxYxNum: 8,
        //     fxYxNum: 20,
        //   },
        //   {
        //     statDate: "2024-02",
        //     tyFmNum: 9,
        //     tyYxNum: 10,
        //     gxFmNum: 34,
        //     gxYxNum: 30,
        //     fxYxNum: 33,
        //   },
        //   {
        //     statDate: "2024-03",
        //     tyFmNum: 23,
        //     tyYxNum: 23,
        //     gxFmNum: 7,
        //     gxYxNum: 8,
        //     fxYxNum: 20,
        //   },
        //   {
        //     statDate: "2024-04",
        //     tyFmNum: 66,
        //     tyYxNum: 23,
        //     gxFmNum: 7,
        //     gxYxNum: 8,
        //     fxYxNum: 55,
        //   },
        //   {
        //     statDate: "2024-05",
        //     tyFmNum: 23,
        //     tyYxNum: 34,
        //     gxFmNum: 26,
        //     gxYxNum: 10,
        //     fxYxNum: 54,
        //   },
        //   {
        //     statDate: "2024-06",
        //     tyFmNum: 23,
        //     tyYxNum: 23,
        //     gxFmNum: 7,
        //     gxYxNum: 8,
        //     fxYxNum: 20,
        //   },
        // ],
        // applyList: [],
        // accessList: [
        //   {
        //     accessTableNo: "data_home",
        //     accessTableNum: 100,
        //   },
        //   {
        //     accessTableNo: "data_ck_home10",
        //     accessTableNum: 31,
        //   },
        //   {
        //     accessTableNo: "data_ck_home9",
        //     accessTableNum: 30,
        //   },
        //   {
        //     accessTableNo: "data_ck_home8",
        //     accessTableNum: 29,
        //   },
        //   {
        //     accessTableNo: "data_ck_home7",
        //     accessTableNum: 28,
        //   },
        //   {
        //     accessTableNo: "data_ck_home6",
        //     accessTableNum: 27,
        //   },
        //   {
        //     accessTableNo: "data_ck_home5",
        //     accessTableNum: 26,
        //   },
        //   {
        //     accessTableNo: "data_ck_home4",
        //     accessTableNum: 25,
        //   },
        //   {
        //     accessTableNo: "data_ck_home3",
        //     accessTableNum: 24,
        //   },
        //   {
        //     accessTableNo: "data_ck_home2",
        //     accessTableNum: 23,
        //   },
        //   {
        //     accessTableNo: "data_ck_home1",
        //     accessTableNum: 22,
        //   },
        // ],
      },
      bottomLeftDatas: [
        "人员域",
        "财务域",
        "物资域",
        "资产域",
        "项目域",
        "公共域",
      ],

      radio: "接入",
      xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      yData: [21, 32, 24, 53, 16, 31, 32, 24, 53, 66],
      yData1: [81, 92, 74, 83, 96, 71, 74, 83, 96, 98],
      yData2: [81, 92, 74, 83, 96, 71, 74, 83, 96, 98],
      topData: [],
      topData1: [],
      topData2: [],
    };
  },

  created() {},

  mounted() {
    this.getData();
    this.getData1();
  },

  methods: {
    radioChange(data) {
      if (data == "接入") {
        this.setBarHeng(this.topData1);
      } else if (data == "申请") {
        this.setBarHeng(this.topData2);
      }
    },
    async getData() {
      await getSynum().then((res) => {
        console.log(res);
        this.mainData = res;
        this.topData1 = res.accessList;

        this.setInit();
        this.setBarHeng(this.topData1);
      });
    },
    async getData1() {
      await getSyApplynum().then((res) => {
        console.log(res);
        this.topData2 = res;
      });
    },
    setInit() {
      this.setLine();
      this.setPie();
      this.setLine1();
      this.setLine2();
      this.setLine3();
    },
    setBarHeng(data) {
      let xdata = [];
      let ydata = [];
      data.forEach((element, index) => {
        if (index < 10) {
          if (this.radio == "接入") {
            xdata.push(element.accessTableNo);
            ydata.push(element.accessTableNum);
          } else if (this.radio == "申请") {
            xdata.push(element.applyTableNo);
            ydata.push(element.applyTableNum);
          }
        }
      });

      let option = {
        //  tooltip: {
        //       show: true,
        //       formatter: "{b}:{c}"
        //     },
        grid: {
          left: "2%",
          top: "3%",
          right: "10%",
          bottom: "3.3%",
          containLabel: true,
        },

        xAxis: {
          type: "value",
          show: false,
          position: "top",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#414141",
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5,
            },
            splitLine: {
              //网格线
              show: false,
            },
            inverse: "true", //排序
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#414141",
              fontSize: "14",
            },
            data: xdata,
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "20",
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{c}",
                textStyle: {
                  color: "#000", //color of value
                  fontSize: "12",
                },
              },
            },
            itemStyle: {
              normal: {
                show: true,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#009fe1", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00ecb5", //   0% 处的颜色
                    },
                  ],
                },
                barBorderRadius: 70,
                borderWidth: 0,
                borderColor: "#333",
              },
            },
            barGap: "0%",
            barCategoryGap: "50%",
            data: ydata,
          },
        ],
      };

      let chartBox = this.$echarts.init(this.$refs.top10);
      chartBox.setOption(option);
    },
    setLine3() {
      let xdata = [];
      let ydata = [];

      this.mainData.ckList.forEach((element) => {
        xdata.push(element.statDate);
        ydata.push(element.fxYxNum);
      });
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "3%",
          bottom: "3%",
        },
        xAxis: [
          {
            type: "category",
            data: xdata,

            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name:"有效表",
            type: "line",
            smooth: true,
            symbolSize: 3,
            data: ydata,
            lineStyle: {
              normal: {
                width: 2,
                color: "#1890ff",
              },
            },
            itemStyle: {
              normal: {
                color: "#1890ff",
              },
            },
          },
          //   {
          //     type: "line",
          //     smooth: true,
          //     symbolSize: 3,
          //     data: this.yData1,
          //     lineStyle: {
          //       normal: {
          //         width: 2,
          //         color: "#00df7c",
          //       },
          //     },
          //     itemStyle: {
          //       normal: {
          //         color: "#00df7c",
          //       },
          //     },
          //   },
        ],
      };
      let chartBox = this.$echarts.init(this.$refs.botLine3);
      chartBox.setOption(option);
    },
    setLine2() {
      let xdata = [];
      let ydata1 = [];
      let ydata2 = [];
      this.mainData.ckList.forEach((element) => {
        xdata.push(element.statDate);
        ydata1.push(element.gxFmNum);
        ydata2.push(element.gxYxNum);
      });
      let option = {
        tooltip: {
          trigger: "axis",
          //   backgroundColor: "rgba(13,5,30,.6)",
          //   borderWidth: 1,
          //   borderColor: "#4ddd8f",
          //   padding: 5,
          //   textStyle: {
          //     color: "#fff",
          //   },
        },
        legend: {
            show:false,
          itemWidth: 16,
          itemHeight: 12,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          x: "100",
          data: ["有效表","负面清单"],
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xdata,

            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(0,0,0,0.2)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(0,0,0,0.45)",
              },
            },
            axisLabel: {
              show: false,

              color: "#414141",
              rotate: 0,
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "档案合格率",
            nameTextStyle: {
              color: "#414141",
              padding: [0, 0, -5, 0],
            },
            axisLabel: {
              show: false,

              color: "#414141",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(64,136,254,1)",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
                width: 1,
                // type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "有效表",
            type: "line",
            smooth: true,
            symbolSize: 3,
            data: ydata2,
            lineStyle: {
              normal: {
                width: 2,
                color: "#1890ff",
              },
            },
            itemStyle: {
              normal: {
                color: "#1890ff",
              },
            },
          },
          {
            name: "负面清单",
            type: "line",
            smooth: true,
            symbolSize: 3,
            data: ydata1,
            lineStyle: {
              normal: {
                width: 2,
                color: "#00df7c",
              },
            },
            itemStyle: {
              normal: {
                color: "#00df7c",
              },
            },
          },
        ],
      };
      let chartBox = this.$echarts.init(this.$refs.botLine2);
      chartBox.setOption(option);
    },
    setLine1() {
      let xdata = [];
      let ydata1 = [];
      let ydata2 = [];
      this.mainData.ckList.forEach((element) => {
        xdata.push(element.statDate);
        ydata1.push(element.tyFmNum);
        ydata2.push(element.tyYxNum);
      });
      let option = {
        tooltip: {
          trigger: "axis",
          //   backgroundColor: "rgba(13,5,30,.6)",
          //   borderWidth: 1,
          //   borderColor: "#4ddd8f",
          //   padding: 5,
          //   textStyle: {
          //     color: "#fff",
          //   },
        },
        legend: {
            show:false,
          itemWidth: 16,
          itemHeight: 12,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          x: "100",
          data: ["有效表","负面清单"],
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xdata,

            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(0,0,0,0.2)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(0,0,0,0.45)",
              },
            },
            axisLabel: {
              show: false,

              color: "#414141",
              rotate: 0,
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "档案合格率",
            nameTextStyle: {
              color: "#414141",
              padding: [0, 0, -5, 0],
            },
            axisLabel: {
              show: false,

              color: "#414141",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(64,136,254,1)",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
                width: 1,
                // type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "有效表",
            type: "line",
            smooth: true,
            symbolSize: 3,
            data: ydata2,
            lineStyle: {
              normal: {
                width: 2,
                color: "#1890ff",
              },
            },
            itemStyle: {
              normal: {
                color: "#1890ff",
              },
            },
          },
          {
            name: "负面清单",
            type: "line",
            smooth: true,
            symbolSize: 3,
            data: ydata1,
            lineStyle: {
              normal: {
                width: 2,
                color: "#00df7c",
              },
            },
            itemStyle: {
              normal: {
                color: "#00df7c",
              },
            },
          },
        ],
      };
      let chartBox = this.$echarts.init(this.$refs.botLine1);
      chartBox.setOption(option);
    },
    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
      const midRatio = (startRatio + endRatio) / 2;
      const startRadian = startRatio * Math.PI * 2;
      const endRadian = endRatio * Math.PI * 2;
      const midRadian = midRatio * Math.PI * 2;
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false;
      }
      k = typeof k !== "undefined" ? k : 1 / 3;
      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
      // 鼠标滑过时外环放大大小
      const hoverRate = isHovered ? 1.05 : 1;
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32,
        },

        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },

        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },

        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },

        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u);
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u);
          }
          return Math.sin(v) > 0 ? 60 : -1;
        },
      };
    },

    // 生成模拟 3D 饼图的配置项
    getPie3D(pieData, internalDiameterRatio) {
      const series = [];
      let sumValue = 0;
      let startValue = 0;
      let endValue = 0;
      const legendData = [];
      const k =
        typeof internalDiameterRatio !== "undefined"
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;
      for (let i = 0; i < pieData.length; i += 1) {
        sumValue += pieData[i].value;
        const seriesItem = {
          name:
            typeof pieData[i].name === "undefined"
              ? `series${i}`
              : pieData[i].name,
          type: "surface",
          parametric: true,
          wireframe: {
            show: false,
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k,
          },
        };
        if (typeof pieData[i].itemStyle !== "undefined") {
          const { itemStyle } = pieData[i];
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== "undefined"
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null;
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== "undefined"
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null;

          seriesItem.itemStyle = itemStyle;
        }
        series.push(seriesItem);
      }
      for (let i = 0; i < series.length; i += 1) {
        endValue = startValue + series[i].pieData.value;
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          true,
          false,
          k,
          10 //在此处传入饼图初始高度h
        );
        startValue = endValue;
        legendData.push(series[i].name);
      }

      series.push({
        name: "pie2d",
        type: "pie",

        label: {
          color: "#333",
          opacity: 1,
          fontSize: 12,
          formatter: (params) => {
            return `${params.data.name}\n${params.data.value}\n${(
              (params.data.value / _.sumBy(pieData, "value")) *
              100
            ).toFixed(2)}%`;
          },
        },
        labelLine: {
          length: 40,
        },
        startAngle: -13, //起始角度，支持范围[0, 360]。
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["10%", "50%"],
        center: ["35%", "44%"],
        data: pieData,
        itemStyle: {
          opacity: 0.0,
        },
      });

      // 底部透明的圆环
      //   series.push({
      //     name: "mouseoutSeries",
      //     type: "surface",
      //     parametric: true,
      //     wireframe: {
      //       show: false,
      //     },
      //     itemStyle: {
      //       opacity: 0,
      //       color: "#102b6f",
      //     },
      //     parametricEquation: {
      //       u: {
      //         min: 0,
      //         max: Math.PI * 2,
      //         step: Math.PI / 20,
      //       },
      //       v: {
      //         min: 0,
      //         max: Math.PI,
      //         step: Math.PI / 20,
      //       },
      //       x: function (u, v) {
      //         return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3.75;
      //       },
      //       y: function (u, v) {
      //         return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3.75;
      //       },
      //       z: function (u, v) {
      //         return Math.cos(v) > 0 ? -5 : -7;
      //       },
      //     },
      //   });

      // 准备待返回的配置项，把准备好的series 传入。
      const option = {
        title: {
          show: false,
        },
        legend: {
          show: true,
          orient: "vertical",
          top: "center",
          right: "3%",
              textStyle: {
      //图例字体大小
      fontSize: 14,
    },

        },
        color: [
          "rgba(111,57,244,1)",
          "rgba(217,36,242,1)",
          "rgba(51,210,186,1)",
        ],
        tooltip: {
          formatter: (params) => {
            if (params.seriesName !== "mouseoutSeries") {
              return `${params.marker}${params.seriesName}：${
                pieData[params.seriesIndex].value
              }`;
            }
            return "";
          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false,
          top: "-5%",
          left: "-15%",
          boxHeight: 0.6, //修改立体饼图的高度
          viewControl: {
            // 3d效果可以放大、旋转等，
            alpha: 40, //饼图翻转的程度
            beta: 30,
            rotateSensitivity: 1,
            zoomSensitivity: 0,
            panSensitivity: 0,
            autoRotate: false, //是否自动旋转
            distance: 200, //距离越小看到的饼图越大
          },
        },
        series,
      };
      return option;
    },

    setPie() {
      var colorList = ["#FF9900", "#FFCC33", "#99CC00"];

      let echartData = [
        // {
        //   value: 48,
        //   name: "未上报行程单",
        // },
        // {
        //   value: 32,
        //   name: "途径购物店",
        // },
        // {
        //   value: 19,
        //   name: "行程偏移",
        // },
      ];
      this.mainData.zyList.forEach((element) => {
        echartData.push({
          value: element.zyNum,
          name: element.zyType,
        });
      });

      var seriesData = echartData.map((item, index) => {
        return {
          ...item,
          // value: Math.sqrt(item.value).toFixed(0) * 100,
          actValue: item.value,
          label: {
            show: true,
            position: "outside",
            borderRadius: 5,
            padding: [0, 5, 3, -3],
            // color: colorList[index],
            color: "#333",
            textStyle: {
              fontSize: 14,
              lineHeight: 24,
            },
            formatter: "{b} | {c}\n{d}%",
          },
        };
      });
      let option = this.getPie3D(seriesData, 0.5); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环

      let chartBox = this.$echarts.init(this.$refs.pieBox);

      chartBox.setOption(option);
    },
    setLine() {
      this.xData = [];
      this.yData2 = [];

      this.mainData.midList.forEach((element) => {
        this.xData.push(element.statDate);
        this.yData2.push(element.dataNum || 0);
      });

      let option = {
        tooltip: {
          trigger: "axis",
          //   backgroundColor: "rgba(13,5,30,.6)",
          //   borderWidth: 1,
          //   borderColor: "#4ddd8f",
          //   padding: 5,
          //   textStyle: {
          //     color: "#fff",
          //   },
        },
        legend: {
          itemWidth: 16,
          itemHeight: 12,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          x: "100",
          data: [""],
        },
        grid: {
          top: "13%",
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,

            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(0,0,0,0.2)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0,0,0,0.45)",
              },
            },
            axisLabel: {
              color: "#414141",
              fontSize:14,
              rotate: 0,
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "档案合格率",
            nameTextStyle: {
              color: "#414141",
              padding: [0, 0, -5, 0],
            },
            axisLabel: {
              color: "#414141",
              fontSize:14,

            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(64,136,254,1)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
                width: 1,
                // type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "line",
            smooth: true,
            symbolSize: 4,
            data: this.yData2,
            lineStyle: {
              normal: {
                width: 4,
                color: "#1890ff",
                shadowColor: "rgba(22, 130, 255, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 20,
              },
            },
            itemStyle: {
              normal: {
                color: "#1890ff",
                borderWidth: 6,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                shadowBlur: 100,*/
                borderColor: "#1890ff",
              },
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(22, 130, 255, 0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(108,80,243,0)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      let chartBox = this.$echarts.init(this.$refs.lineBox);
      chartBox.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.shouye {
  padding: 14px;
  box-sizing: border-box;
  min-width: 1200px;
  min-height: 100%;
  background: #ecf1f1;
  .top-box {
    display: flex;
    justify-content: space-between;

    .top-item {
      position: relative;
      width: calc(25% - 10px);
      height: 120px;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 12px;

      .top-title {
        color: #414141;
        font-size: 16px;
      }
      .numb {
        color: #15304e;
        font-size: 30px;
        margin-top: 14px;
        .youxiao {
          color: #525252;
          font-size: 14px;
          margin-left: 18px;
        }
        .youxiao-numb {
          color: #08c22f;
          margin: 0 4px;
        }
      }
      .unit {
        color: #525252;
        font-size: 12px;
        margin-left: 6px;
      }
      .img-box {
        position: absolute;
        top: 26px;
        right: 22px;
        width: 70px;
        height: 70px;
        background-size: 100% 100%;
      }
      .item-img1 {
        background-image: url("../assets/images/img (11).png");
      }
      .item-img2 {
        background-image: url("../assets/images/img (10).png");
      }
      .item-img3 {
        background-image: url("../assets/images/img (4).png");
      }
      .item-img4 {
        background-image: url("../assets/images/img (3).png");
      }
      .item-img5 {
        background-image: url("../assets/images/img (8).png");
      }
      .item-img6 {
        background-image: url("../assets/images/img (6).png");
      }
    }
    .item1 {
      background: linear-gradient(170.77deg, #eefeff 0%, #ffffff 100%);
    }
    .item2 {
      background: linear-gradient(170.77deg, #eefeff 0%, #ffffff 100%);
    }
    .item3 {
      background: linear-gradient(170.77deg, #e0ecff 0%, #ffffff 100%);
    }
    .item4 {
      background: linear-gradient(170.77deg, #e0ecff 0%, #ffffff 100%);
    }
    .item5 {
      background: linear-gradient(170.77deg, #fff7ee 0%, #ffffff 100%);
    }
    .item6 {
      background: linear-gradient(170.77deg, #fff7ee 0%, #ffffff 100%);
    }
  }
  .middle-box {
    display: flex;
    justify-content: space-between;
    .middle-item {
      width: calc(50% - 8px);
      height: 330px;
      padding:  10px 20px;
      box-sizing: border-box;
      background: linear-gradient(180deg, #ebfffb 0%, #ffffff 100%);
      border-radius: 12px;
      margin-top: 14px;
      .chart-box {
        width: 100%;
        height: calc(100% - 40px);
      }
    }
  }
  .bottom-box {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    .bot-left,
    .bot-right {
      position: relative;
      width: calc(29% - 10px);
      height: 550px;
      background: linear-gradient(180deg, #f2ffff 0%, #ffffff 100%);
      .bot-content1 {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
        .shu-xian {
          position: absolute;
          top: 0;
          left: 50%;
          width: 0;
          height: 100%;
          border-right: 2px solid;
          border-color: #e0e0e0;
        }
        .bot-left-item {
          display: flex;
          justify-content: space-between;
          width: 46%;
          height: 94px;
          //   border-bottom: 1px solid #e0e0e0;
          margin-bottom: 2px;

          .item {
            text-align: center;
          }
          .item1 {
            box-sizing: border-box;
            background-position: center 10px;
            background-size: 32px 32px;

            p {
              margin-top: 44px;
              font-weight: 700;
              color: #414141;
              font-size: 14px;
            }
          }
          .item2,
          .item3 {
            h5 {
              color: #000000;
              font-size: 14px;
              margin-top: 12px;
              font-weight: normal;
            }
            p {
              font-weight: 700;
              font-size: 20px;
              margin-top: 10px;
            }
          }
          .item2 {
            width: 32%;
          }
          .item2 {
            width: 33%;
          }
          .item3 {
            width: 35%;
          }
          .bg0 {
            background-image: url("../assets/images/one.png");
          }
          .bg1 {
            background-image: url("../assets/images/d.png");
          }
          .bg2 {
            background-image: url("../assets/images/b.png");
          }
          .bg3 {
            background-image: url("../assets/images/c.png");
          }
          .bg4 {
            background-image: url("../assets/images/three.png");
          }
          .bg5 {
            background-image: url("../assets/images/a.png");
          }
          .bg6 {
            background-image: url("../assets/images/six.png");
          }
          .bg7 {
            background-image: url("../assets/images/two.png");
          }
          .bg8 {
            background-image: url("../assets/images/four.png");
          }
          .bg9 {
            background-image: url("../assets/images/five.png");
          }
        }
        .bot-left-item4,
        .bot-left-item9 {
          border: none;
        }
      }
      .check-box {
        position: absolute;
        right: 10px;
        top: 14px;
        width: 112px;
        height: 30px;
      }
      .top10-box {
        display: flex;
        .top10-left {
          width: 24px;
          height: 100%;
          margin-top: 44px;
          .top-index1 {
            background-image: url("../assets/images/img (12).png");
          }
          .top-index2 {
            background-image: url("../assets/images/img (1).png");
          }
          .top-index3 {
            background-image: url("../assets/images/img (2).png");
          }
          .top-index {
            width: 24px;
            height: 24px;
            text-align: center;
            background-size: 20px 20px;
            background-position: center center;
            margin-bottom: 19px;
          }
        }
        .top10-right {
          width: calc(100% - 24px);
          height: 100%;
        }
      }
    }
    .bot-center {
      width: calc(42% - 10px);
      height: 550px;
      background: linear-gradient(180deg, #f2ffff 0%, #ffffff 100%);
      //   background-image: url('../assets/images/bg1.png');
      //   background-size: 100% 100%;
      .title1 {
        width: 40%;
        margin: 10px auto;
        text-align: center;
        .title-img {
          width: 5px;
          height: 20px;
          float: right;
        }
      }
      .center1 {
        width: 100%;
        height: 120px;
        margin-top: 14px;
        display: flex;
        justify-content: space-around;
        .bot-left {
          width: 70%;
          height: 100%;
          display: flex;

          .bot-title {
            width: 23%;
            height: 100%;
            font-weight: 700;
            text-align: center;
            font-size: 24px;
            margin-top: 70px;
          }
          .bot-numb {
            width: 77%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            .numb-item {
              width: 33.3%;
              height: 100%;
              text-align: center;
              background-image: url("../assets/images/dibu.png");
              background-position: center bottom;
              background-size: 80px 60px;
              background-repeat: no-repeat;
              h5 {
                color: #000000;
                font-size: 14px;
                margin-top: 22px;
              }
              p {
                font-weight: 700;
                font-size: 24px;
                margin-top: 30px;
              }
            }
          }
        }
        .bot-right {
          width: 30%;
          height: 100%;
        }
      }
      .center-bot {
        width: 100%;
        height: 24px;
        background-image: url("../assets/images/di.png");
        background-size: 100% 100%;
      }
    }
    .bot-item {
      border-radius: 12px;
      padding: 10px 16px;
      box-sizing: border-box;
      .bot-content {
        height: 480px;
      }
    }
  }
}
</style>
